<template>
  <div>
    <div class="clasTop">
      <p class="class-top">商品分类</p>
      <el-button type="primary" @click="dialogFormVisible = true"
        >添加分类</el-button
      >
    </div>
    <el-table :data="classifyList" style="width: 100%">
      <el-table-column type="index" label="序号" width="150"> </el-table-column>
      <el-table-column prop="cateName" label="分类名称" width="180">
        <template slot-scope="scope">
          <label v-show="!scope.row.isEdit">{{ scope.row.cateName }}</label>
          <el-input v-show="scope.row.isEdit" v-model="scope.row.cateName" />
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            :disabled="!scope.row.isEdit"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClick(scope.row)">{{
            scope.row.isEdit ? "完成" : "编辑"
          }}</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 翻页 -->
    <div class="block" style="margin-top: 15px">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="pagechange"
        layout="total, prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 添加分类弹框-->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addCls, getCls, delCls, editcls } from "@/apis/goods";
// delCls
export default {
  data() {
    return {
      dialogFormVisible: false, //蒙版
      formLabelWidth: "90px", //蒙版的宽
      form: { name: "" }, //添加分类表单
      value: false, //添加是否启用
      currentPage: 1, //当前页数
      pageSize: 5, //每次显示的页数
      total: 0, //总条数
      classifyList: [], //用户数据
    };
  },
  //获取分类列表
  created() {
    this.reqData();
  },
  methods: {
    //请求数据
    reqData() {
      if (this.flag) {
        this.$message({
          message: "请勿频繁操作",
          type: "warning",
        });
        return;
      }
      this.flag = true; //定义一个标杆
      setTimeout(() => {
        this.flag = false;
      }, 1500);
      getCls({ currentPage: this.currentPage, pageSize: this.pageSize }).then(
        (res) => {
          // console.log(res.data);
          for (let obj of res.data.data) {
            obj.state = obj.state == 1;
            obj.isEdit = false; //此行数据是否已经点击
          }
          this.classifyList = res.data.data; //用户数据
          this.total = res.data.total; //总条数
        }
      );
    },

    //改变页数
    pagechange(page) {
      this.currentPage = page; //改变当前页数,page就是当前页数
      this.reqData();
    },
    //确认添加分类
    confirmAdd() {
      addCls({ cateName: this.form.name, state: this.value }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: `您已成功添加${this.form.name}分类`,
          });
          this.reqData();
          this.dialogFormVisible = false;
        } else {
          this.$message({
            type: "warning",
            message: "请输入分类名称",
          });
        }
      });
    },
    //删除分类
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delCls({ id: row.id }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "您已成功删除一条数据",
              });
              this.reqData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑
    handleClick(row) {
      // 动态设置数据并通过这个数据判断显示方式
      if (row.isEdit) {
        //点击完成时,发送请求
        editcls({ id: row.id, cateName: row.cateName, state: row.state }).then(
          (res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "您已修改当前数据",
                type: "success",
              });
            }
          }
        );
      }
      row.isEdit = !row.isEdit; //改变当前点击行的数据
    },
  },
};
</script>

<style lang="less" scoped>
.clasTop {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dcdfe6;
  p {
    border-bottom: 0px solid #dcdfe6;
  }
  button {
    width: 80px;
    padding: 0;
    height: 35px;
  }
}
</style>